<script setup lang="ts">


const dialog = ref(false);
const notifications = ref(false);
const sound = ref(true);
const widgets = ref(false);

const {darkTheme}=storeToRefs(useCustomizeThemeStore())
const {user} = storeToRefs(useAuthStore())
const {localComfyUIUrl,useLocalComfyUI,sd3_key,useOss,useCustomizeOss,ossConfig} = storeToRefs(useStableDiffusionStore())
const {localVitsUrl,localChatttsUrl,useLocalVits,useLocalChatTTS} = storeToRefs(useWorkEditStore())
</script>

<template>
  <div class="text-center">
    <v-dialog v-model="dialog" fullscreen :scrim="false" transition="dialog-bottom-transition">
      <template v-slot:activator="{ props }">
        <v-btn class="px-4" variant="text" :color="darkTheme?'white':'primary'" icon="mdi-cog" v-bind="props"></v-btn>
      </template>
        <v-card>
          <v-toolbar dark color="primary" style="flex: unset">
            <v-btn icon="mdi-cog"  @click="dialog = false" flat>
            </v-btn>
            <v-toolbar-title>Settings</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-toolbar-items>
              <v-btn prepend-icon="mdi-close" dark @click="dialog = false" flat> 关闭 </v-btn>
            </v-toolbar-items>
          </v-toolbar>
          <v-card-text>
            <v-col cols="12" md="9">

              <!-- ---------------------------------------------- -->
              <!--   AI绘画设置 -->
              <!-- ---------------------------------------------- -->
              <v-card class="mb-2">
                <v-card-title class="py-2 font-weight-bold">
                  AI绘画设置
                </v-card-title>
                <v-divider></v-divider>
                <v-card-text class="pa-4">
                  <div>
                    <v-switch
                        v-model="useLocalComfyUI"
                        color="primary"
                        class="mr-4"
                        hide-details
                        label="使用本地自定义ComfyUI服务器"
                    ></v-switch>
                  </div>
                  <v-row>
                    <v-col cols="12">
                      <v-label class="font-weight-medium mb-2">ComfyUI服务器</v-label>

                      <v-text-field
                          v-model="localComfyUIUrl"
                          color="primary"
                          variant="outlined"
                          density="compact"
                          type="text"
                          placeholder="http://127.0.0.1:8188"
                          hide-details
                      />
                    </v-col>
                    <v-col cols="12">
                      <v-label class="font-weight-medium mb-2">SD3 API key</v-label>
                      <v-text-field
                          v-model="sd3_key"
                          color="primary"
                          variant="outlined"
                          density="compact"
                          type="text"
                          placeholder="Your SD3 API key here"
                          hide-details
                      />
                    </v-col>
                  </v-row>
                </v-card-text>
              </v-card>
              <!--OSS配置-->
              <v-card class="mb-5">
                <v-card-title class="py-2 font-weight-bold">
                  OSS配置
                </v-card-title>
                <v-divider></v-divider>
                <v-card-text class="pa-4">
                  <div>
                    <v-switch
                        v-model="useOss"
                        color="primary"
                        class="mr-4"
                        hide-details
                        density="compact"
                        label="是否启用OSS，不启动将绘画图片上传到本地，启动将将绘图结果上传到云存储"
                    ></v-switch>
                  </div>
<!--                  <div>-->
<!--                    <v-switch-->
<!--                        v-model="useCustomizeOss"-->
<!--                        color="primary"-->
<!--                        class="mr-4"-->
<!--                        hide-details-->
<!--                        density="compact"-->
<!--                        label="启动自定义OSS，启用自定义OSS，将绘图结果上传到自己的云存储"-->
<!--                    ></v-switch>-->
<!--                  </div>-->
<!--                  <v-row>-->
<!--                    <v-col cols="12" sm="6">-->
<!--                      <v-label class="font-weight-medium mb-2">OSS region</v-label>-->
<!--                      <v-text-field-->
<!--                          v-model="ossConfig.ossRegion"-->
<!--                          color="primary"-->
<!--                          variant="outlined"-->
<!--                          density="compact"-->
<!--                          type="text"-->
<!--                          placeholder="your region here"-->
<!--                          hide-details-->
<!--                      />-->
<!--                    </v-col>-->
<!--                    <v-col cols="12" sm="6">-->
<!--                      <v-label class="font-weight-medium mb-2">OSS Bucket</v-label>-->
<!--                      <v-text-field-->
<!--                          v-model="ossConfig.ossBucket"-->
<!--                          color="primary"-->
<!--                          variant="outlined"-->
<!--                          density="compact"-->
<!--                          type="text"-->
<!--                          placeholder="your bucket name here"-->
<!--                          hide-details-->
<!--                      />-->
<!--                    </v-col>-->
<!--                    <v-col cols="12" sm="6">-->
<!--                      <v-label class="font-weight-medium mb-2">OSS AccessKey</v-label>-->
<!--                      <v-text-field-->
<!--                          v-model="ossConfig.ossKey"-->
<!--                          color="primary"-->
<!--                          variant="outlined"-->
<!--                          density="compact"-->
<!--                          type="text"-->
<!--                          placeholder="your access key here"-->
<!--                          hide-details-->
<!--                      />-->
<!--                    </v-col>-->
<!--                    <v-col cols="12" sm="6">-->
<!--                      <v-label class="font-weight-medium mb-2">OSS Secret</v-label>-->
<!--                      <v-text-field-->
<!--                          v-model="ossConfig.ossSecret"-->
<!--                          color="primary"-->
<!--                          variant="outlined"-->
<!--                          density="compact"-->
<!--                          type="text"-->
<!--                          placeholder="your secret here"-->
<!--                          hide-details-->
<!--                      />-->
<!--                    </v-col>-->
<!--                  </v-row>-->
                </v-card-text>
                <v-divider></v-divider>
<!--                <v-card-actions class="pa-5">-->
<!--                  <v-spacer></v-spacer>-->
<!--                  <v-btn-->
<!--                      class="px-5"-->
<!--                      color="primary"-->
<!--                      elevation="1"-->
<!--                      variant="elevated"-->
<!--                  >-->
<!--                    保存设置-->
<!--                  </v-btn-->
<!--                  >-->
<!--                </v-card-actions>-->
              </v-card>
              <v-card class="mb-2">
                <v-card-title class="py-2 font-weight-bold">
                  AI语音合成服务器配置
                </v-card-title>
                <v-divider></v-divider>
                <v-card-text class="pa-4">
                  <v-row>
                    <v-col cols="12">
                      <v-label class="font-weight-medium mb-2">GPT VITS语音合成服务器</v-label>
                      <v-switch
                          v-model="useLocalVits"
                          color="primary"
                          class="mr-4"
                          hide-details
                          density="compact"
                          label="使用本地GPTVITS语音合成"
                      ></v-switch>
                      <v-text-field
                          v-model="localVitsUrl"
                          color="primary"
                          variant="outlined"
                          density="compact"
                          type="text"
                          placeholder="http://127.0.0.1:5000"
                          hide-details
                      />
                    </v-col>
                    <v-col cols="12">
                      <v-label class="font-weight-medium mb-2">ChatTTS语音合成服务器</v-label>
                      <v-switch
                          v-model="useLocalChatTTS"
                          color="primary"
                          class="mr-4"
                          hide-details
                          density="compact"
                          label="使用本地ChatTTS语音合成"
                      ></v-switch>
                      <v-text-field
                          v-model="localChatttsUrl"
                          color="primary"
                          variant="outlined"
                          density="compact"
                          type="text"
                          placeholder="http://127.0.0.1:9966"
                          hide-details
                      />
                    </v-col>
                  </v-row>
                </v-card-text>
              </v-card>

              <!-- ---------------------------------------------- -->
              <!--   Notifications  -->
              <!-- ---------------------------------------------- -->
<!--              <v-card class="mb-5">-->
<!--                <v-card-title class="py-4 font-weight-bold">-->
<!--                  Notifications-->
<!--                </v-card-title-->
<!--                >-->
<!--                <v-divider></v-divider>-->
<!--                <v-card-text class="pa-7">-->
<!--                  <div>-->
<!--                    <v-switch-->
<!--                        color="primary"-->
<!--                        class="mr-4"-->
<!--                        hide-details-->
<!--                        label=" Receive newsletters, promotions and news from lux"-->
<!--                    ></v-switch>-->
<!--                  </div>-->
<!--                  <div>-->
<!--                    <v-switch-->
<!--                        color="primary"-->
<!--                        class="mr-4"-->
<!--                        hide-details-->
<!--                        label=" Notify me when someone I follow uploads new workx"-->
<!--                    ></v-switch>-->
<!--                  </div>-->
<!--                </v-card-text>-->
<!--                <v-divider></v-divider>-->
<!--                <v-card-actions class="pa-5">-->
<!--                  <v-spacer></v-spacer>-->
<!--                  <v-btn-->
<!--                      class="px-5"-->
<!--                      color="primary"-->
<!--                      elevation="1"-->
<!--                      variant="elevated"-->
<!--                  >-->
<!--                    Unpdate Notifications-->
<!--                  </v-btn-->
<!--                  >-->
<!--                </v-card-actions>-->
<!--              </v-card>-->
            </v-col>
          </v-card-text>
        </v-card>
    </v-dialog>
  </div>
</template>
